<template>
  <div class="container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.titleObj[state.dialog.type]"
      label-position="top" width="800px">
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="auto">
        <div class="orderType" v-if="state.dialog.typeObj === 'order'">
          <el-form-item label="售后金额:" prop="after_sales_service_price">
            <el-input v-model="state.ruleForm.after_sales_service_price" placeholder="请输入" clearable
              :disabled="isDisabledFn" />
          </el-form-item>
          <el-form-item label="是否售后:" prop="after_sales_service">
            <el-radio-group v-model="state.ruleForm.after_sales_service">
              <el-radio v-for="(item, index) in state.orderStatusArr" :key="index" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

        </div>
        <div class="itemTpe" v-if="state.dialog.typeObj === 'item'">
          <el-form-item label="生产交期:" prop="production_lead_time">
            <el-date-picker v-model="state.ruleForm.production_lead_time" type="datetime" placeholder="选择日期时间"
              format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" seconds-picker />
          </el-form-item>
          <el-form-item label="生产成本（付款）:" prop="production_cost">
            <el-input v-model="state.ruleForm.production_cost" placeholder="请输入" clearable :disabled="isDisabledFn" />
          </el-form-item>
          <el-form-item label="生产方:" prop="production_party_name">
            <el-input v-model="state.ruleForm.production_party_name" placeholder="请输入" clearable
              :disabled="isDisabledFn" />
          </el-form-item>
          <el-form-item label="选择供应商" prop="suppliers_id">
            <el-select v-model="state.ruleForm.suppliers_id" placeholder="请选择" clearable>
              <el-option v-for="item in state.suppliersList" :key="item.id" :label="item.supplier_name"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <template v-if="!isDisabledFn" #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="addPrinting">
import { reactive, onMounted, computed } from 'vue';
import { orderEdit, suppliers } from '/@/api/startfab/index';
import { payStatusArr, payTypeArr, afterSalesServiceArr } from '/@/commmon/variate';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['updateList', 'updateItem']);
const state = reactive({
  payStatusArr: payStatusArr,
  payTypeArr: payTypeArr,
  orderStatusArr: afterSalesServiceArr,
  ruleForm: {
    order_price: '',
    logistics_cost: '',
    after_sales_service: '',
    after_sales_service_price: '',
    production_cost: '',
    production_lead_time: '',
    production_party_name: '',
    suppliers_id: ''
  },
  ruleRules: {},
  dialog: {
    isShowDialog: false,
    row: null,
    type: '',
    typeObj: {},
    titleObj: {
      'view': '查看',
      'edit': '编辑',
      'add': '新增'
    },
    isDisabled: false
  },
  loading: false,
  originalFiles: {},
  suppliersList: []
})
const onSubmit = async () => {
  const params = {
    order_id: state.ruleForm.order_id,
    after_sales_service: state.ruleForm.after_sales_service,
    after_sales_service_price: state.ruleForm.after_sales_service_price,
    type: 5,
  }
  const paramsOne = {
    order_id: state.ruleForm.id,
    production_lead_time: state.ruleForm.production_lead_time,
    production_cost: state.ruleForm.production_cost,
    production_party_name: state.ruleForm.production_party_name,
    suppliers_id: state.ruleForm.suppliers_id,
    type: 3
  }
  if (state.dialog.type === 'add') {
    console.log('新增');
  } else {
    if (state.dialog.typeObj === 'order') {
      console.log(params, "ruleForm");
      orderEdit(params).then((res) => {
        if (res.code === 10000) {
          const updateData = {
            ...state.dialog.row,
            ...state.ruleForm,
          };
          emit('updateItem', updateData, 'order'); // 局部刷新
          // emit('updateList'); 全局列表刷新
          onCancel();
          ElMessage.success(res.msg);
        }
      })
    } else if (state.dialog.typeObj === "item") {
      orderEdit(paramsOne).then((res) => {
        if (res.code === 10000) {
          const updateData = {
            ...state.dialog.row,
            ...state.ruleForm,
          };
          emit('updateItem', updateData, 'item');
          onCancel();
          ElMessage.success(res.msg);
        }
      })
    }
  }
}
const openDialog = (type, row, TypeObj) => {
  const typeArr = ['edit', 'view'];
  state.dialog.row = row;
  state.dialog.type = type;
  state.dialog.typeObj = TypeObj
  getSelect()
  closeDialog();
  if (row && typeArr.includes(type)) {
    state.ruleForm = {
      ...state.ruleForm,
      order_id: row.orderid,
      id: row.id,
      order_price: row.order_price,
      logistics_cost: row.logistics_cost,
      after_sales_service: row.after_sales_service,
      after_sales_service_price: row.after_sales_service_price,
      production_cost: row.production_cost,
      production_lead_time: row.production_lead_time,
      production_party_name: row.production_party_name,
      suppliers_id: row.suppliers_id || ''
    };
  }
  state.dialog.isShowDialog = true;
};

const closeDialog = () => {
  state.ruleForm = {
    order_id: '',
    order_price: '',
    logistics_cost: '',
    after_sales_service: '',
    after_sales_service_price: '',
    production_cost: '',
    production_party_name: '',
  }
};

const onCancel = () => {
  closeDialog();
  state.dialog.isShowDialog = false;
};

const getSelect = () => {
  const params = {
    page: 1,
    pageNum: 1000
  }
  suppliers(params).then((res) => {
    if (res.code === 10000) {
      state.suppliersList = res.data.list
    }
  })
}
onMounted(() => { })
const isDisabledFn = computed(() => {
  return state.dialog.type === 'view'
})
defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-form-item__content) {
  display: block;
}

.imgshow {
  width: 100px;
  height: 100px;
}
</style>
